<template>
  <div>
    <personal-header :title="title"/>
    <div>
      <section class="profile">
        <header class="header">
          <a class="header_title">
            <span class="header_title_text">我的</span>
          </a>
        </header>
        <router-link tag="section" :to="userInfo._id ? '/userinfo' : '/login'" class="profile-number">
          <a href="javascript:" class="profile-link">
            <div class="profile_image">
              <i class="iconfont icon-gerenkuang"></i>
            </div>
            <div class="user-info">
              <p  class="user-info-top" v-if="!userInfo.phone">{{userInfo.name || '登录|注册'}}</p>
              <p>
                <span class="user-icon">
                  <i class="iconfont icon-shouji-copy icon-shouji icon-mobile"></i>
                </span>
                <span class="icon-mobile-number">{{userInfo.phone || '暂无绑定手机号'}}</span>
              </p>
            </div>
            <span class="arrow">
              <i class="iconfont icon-dayuhao"></i>
            </span>
          </a>
        </router-link>
        <section class="profile_info_data border-1px">
          <ul class="info_data_list">
            <a href="javascript:" class="info_data_link">
              <span class="info_data_top"><span>0.00</span>元</span>
              <span class="info_data_bottom">我的余额</span>
            </a>
            <a href="javascript:" class="info_data_link">
              <span class="info_data_top"><span>0</span>个</span>
              <span class="info_data_bottom">我的优惠</span>
            </a>
            <a href="javascript:" class="info_data_link">
              <span class="info_data_top"><span>0</span>分</span>
              <span class="info_data_bottom">我的积分</span>
            </a>
          </ul>
        </section>
        <section class="profile_my_order border-1px">
          <!-- 我的订单 -->
          <a href='javascript:' class="my_order">
            <span>
              <i class="iconfont icon-icon--copy"></i>
            </span>
            <div class="my_order_div">
              <span>我的订单</span>
              <span class="my_order_icon">
                <i class="iconfont icon-dayuhao"></i>
              </span>
            </div>
          </a>
          <!-- 积分商城 -->
          <a href='javascript:' class="my_order">
            <span>
              <i class="iconfont icon-jifen"></i>
            </span>
            <div class="my_order_div">
              <span>积分商城</span>
              <span class="my_order_icon">
                <i class="iconfont icon-dayuhao"></i>
              </span>
            </div>
          </a>
          <!-- 硅谷外卖会员卡 -->
          <a href="javascript:" class="my_order">
            <span>
              <i class="iconfont icon-huiyuanqia1"></i>
            </span>
            <div class="my_order_div">
              <span>硅谷外卖会员卡</span>
              <span class="my_order_icon">
                <i class="iconfont icon-dayuhao"></i>
              </span>
            </div>
          </a>
        </section>
        <section class="profile_my_order border-1px">
          <!-- 服务中心 -->
          <a href="javascript:" class="my_order">
            <span>
              <i class="iconfont icon-fuwuzhongxin"></i>
            </span>
            <div class="my_order_div">
              <span>服务中心</span>
              <span class="my_order_icon">
                <i class="iconfont icon-dayuhao"></i>
              </span>
            </div>
          </a>
        </section>
      </section>
    </div>
    <section class="profile_my_order border-1px tuichu">
      <mt-button type="danger" style="width: 100%" v-if="userInfo._id" @click="logout">退出登陆</mt-button>
    </section>
  </div>
</template>

<script>
import PersonalHeader from '../../components/headertop/HeaderTop'
import {MessageBox, Toast} from 'mint-ui'
import {mapState} from 'vuex'
export default {
  name: 'Personal',
  components: {
    PersonalHeader
  },
  data () {
    return {
      title: '个人中心'
    }
  },
  computed: {
    ...mapState(['userInfo'])
  },
  methods: {
    logout () {
      MessageBox.confirm('确认退出吗?').then(
        action => {
          // 请求退出
          this.$store.dispatch('logout')
          Toast('登出完成')
        },
        action => {
          console.log('点击了取消')
        }
      )
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import "../../common/stylus/mixins.styl"
  .mint-msgbox-header {
    padding: 40px 0 0;
  }
  .tuichu >>> .mint-button
    font-size 28px
    padding 15px 0
    height 70px
    margin-top 20px
  .profile
    width 100%
    overflow hidden /*上下滑动的话就写这条*/
    .header
      background-color #02a774
      position fixed
      z-index 100
      left 0
      top 0
      width 100%
      height 90px
      .header_search
        position absolute
        left 30px
        top 50%
        transform translateY(-50%)
        width 10%
        height 50%
        .icon-sousuo
          font-size 50px
          color #fff
      .header_title
        position absolute
        top 50%
        left 50%
        transform translate(-50%, -50%)
        width 50%
        color #fff
        text-align center
        .header_title_text
          font-size 40px
          color #fff
          display block
      .header_login
        font-size 28px
        color #fff
        position absolute
        right 15px
        top 50%
        transform translateY(-50%)
        .header_login_text
          color #fff
    .profile-number
      margin-top 92px
      .profile-link
        clearFix()
        position relative
        display block
        background #02a774
        padding 40px 20px
        .profile_image
          float left
          width 120px
          height 120px
          border-radius 50%
          overflow hidden
          vertical-align top
          .icon-gerenkuang
            background #e4e4e4
            font-size 124px
            color gray
        .user-info
          float left
          margin-top 16px
          margin-left 30px
          p
            /*font-weight: 700*/
            font-size 37px
            letter-spacing 1px
            color #fff
            &.user-info-top
              padding-bottom 16px
            .user-icon
              display inline-block
              margin-left -30px
              margin-right 10px
              width 40px
              height 40px
              .icon-mobile
                font-size 38.5px
                margin-left 20px
                vertical-align text-top
            .icon-mobile-number
              font-size 28px
              color #fff
        .arrow
          width 24px
          height 24px
          position absolute
          right 30px
          top 40%
          .icon-dayuhao
            color #fff
            font-size 16px
    .profile_info_data
      bottom-border-1px(#e4e4e4)
      width 100%
      background #fff
      overflow hidden
      .info_data_list
        clearFix()
        .info_data_link
          float left
          width 33%
          text-align center
          border-right 1px solid #f1f1f1
          .info_data_top
            display block
            width 100%
            font-size 28px
            color #333
            padding 30px 10px 20px
            span
              display inline-block
              font-size 60px
              color #f90
              font-weight 700
              line-height 60px
          .info_data_bottom
            display inline-block
            font-size 28px
            color #666
            font-weight 400
            padding-bottom 20px
        .info_data_link:nth-of-type(2)
          .info_data_top
            span
              color #ff5f3e
        .info_data_link:nth-of-type(3)
          border 0
          .info_data_top
            span
              color #6ac20b
    .profile_my_order
      top-border-1px(#e4e4e4)
      margin-top 20px
      background #fff
      .my_order
        display flex
        align-items center
        padding-left 30px
        >span
          display flex
          align-items center
          width 40px
          height 40px
          >.iconfont
            margin-left -20px
            font-size 43px
          .icon-icon--copy
            color #02a774
          .icon-jifen
            color #ff5f3e
          .icon-huiyuanqia1
            color #f90
          .icon-fuwuzhongxin
            color #02a774
        .my_order_div
          width 100%
          border-bottom 1px solid #f1f1f1
          padding 36px 20px 36px 0
          font-size 32px
          color #333
          display flex
          justify-content space-between
          span
            display block
          .my_order_icon
            width 20px
            height 20px
            .icon-jiantou1
              color #bbb
              font-size 20px
</style>
